<template>
  <div class="tops" v-if="isLogin">
    <div class="left">
      <img class="logo" src="../assets/image/print.png" alt="" />
      <span class="title">打印工作站</span>
    </div>
    <div class="center">
      <a-menu v-model:selectedKeys="current" @click="changeRouter" mode="horizontal">
        <a-menu-item key="print">
          <template #icon>
            <printer-filled />
          </template>
          打印机管理
        </a-menu-item>
        <!-- <a-menu-item key="list">
          <template #icon>
            <code-filled />
          </template>
          问题反馈
        </a-menu-item> -->
      </a-menu>
    </div>
    <div class="right">
      <UserOutlined title="管理员信息" @click="onChangeWindow('user')"/>
      <!-- <lock-outlined title="锁定" :style="{fontSize: '18px'}" /> -->
      <div class="leftGroup">
        <a-dropdown>
          <a class="ant-dropdown-link" @click.prevent>
            <img class="seting" @click.prevent title="设置"  @click="onChangeWindow('seting')"  src="../assets/image/set.png" alt="">
          </a>
          <template #overlay>
            <a-menu>
              <a-menu-item>
                <a-popconfirm
                  title="是否退出当前账号?"
                  ok-text="Yes"
                  cancel-text="No"
                  @confirm="confirm"
                  @cancel="cancel"
                >
                  <a href="javascript:;">退出</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </div>
      <MinusOutlined title="最小化" @click="onChangeWindow('min')" />
      <CreditCardOutlined v-show="isMax" title="还原" @click="onChangeWindow('scale')" />
      <BorderOutlined v-show="!isMax" title="最大化" @click="onChangeWindow('scale')" />
      <CloseOutlined title="关闭" @click="onChangeWindow('close')" />
    </div>
  </div>
  <div class="tops" v-else>
    <div class="left flex_1" style="text-align:center">
      <img class="logo" src="../assets/image/print.png" alt="" />
      <span class="title">i国网打印工作站</span>
    </div>
    <div class="right">
      <MinusOutlined title="最小化" @click="onChangeWindow('min')" />
      <CreditCardOutlined v-show="isMax" title="还原" @click="onChangeWindow('scale')" />
      <BorderOutlined v-show="!isMax" title="最大化" @click="onChangeWindow('scale')" />
      <CloseOutlined title="关闭" @click="onChangeWindow('close')" />
    </div>
  </div>
  <a-modal
    class="user_hander"
      v-model:visible="userVisible"
      title="管理员信息"
      ok-text="确认"
      cancel-text="取消"
    >
      <div class="user_content">
        <div class="user_content_l">
          <ul>
            <li>姓名：<span>{{user.name}}</span></li>
            <li>账号：<span>{{user.account}}</span></li>
            <li>单位：<span>{{user.baseOrgName}}</span></li>
          </ul>
        </div>
        <div class="user_content_r">
          <a-button type="primary" size="large" @click="confirm">退出登录</a-button>
        </div>
      </div>
      <template #footer>
      </template>
  </a-modal>
</template>

<script>
import { ipcRenderer, remote } from 'electron'
import { MailOutlined, PrinterFilled, AppstoreOutlined, CodeFilled, MinusOutlined, CreditCardOutlined, BorderOutlined, CloseOutlined, SettingOutlined, UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import { mapState } from 'vuex'
export default {
  data() {
    return {
      current: [],
      isMax: false,
      userVisible: false,
      user:JSON.parse(localStorage.getItem('state')) || {}
    };
  },
  components: {
    MailOutlined,
    AppstoreOutlined,
    PrinterFilled,
    CodeFilled,
    MinusOutlined, CreditCardOutlined, BorderOutlined, CloseOutlined,
    SettingOutlined,
    UserOutlined, 
    LockOutlined 
    
  },
  computed: {
    ...mapState([
      'isLogin'
    ]),
  },
  watch:{
    $route(){
      if(this.$route.path == '/print'){
        this.current[0] = "print"
      }
      else{
         this.current[0] = "list"
      }
    }
  },
  methods: {
    // 路由
    changeRouter({ item, key, keyPath }) {
      this.$router.push(`/${key}`)
    },
    // 窗口
    onChangeWindow(type) {
      switch (type) {
        case 'min':
          ipcRenderer.send('window-min')
          break;
        case 'scale':
          ipcRenderer.send('window-max')
          const winInfo = remote.getCurrentWindow()
          this.isMax = winInfo.isMaximized()
          break;
        case 'close':
          ipcRenderer.send('window-close')
          break;
        case 'seting':
          ipcRenderer.send('window-seting')
          break;
        case 'user':
          this.userVisible = true
          break;
      }
    },
    confirm(){
      localStorage.clear()
      sessionStorage.clear()
      this.$store.commit('changeLoginStatus', false)
      this.userVisible = false
      setTimeout(()=>{
        this.$router.push({
          name:'login'
        })
      },1000)
    },
    cancel(){

    }
  }
}
</script>

<style lang="scss" scope>
.user_hander{
  .ant-modal-header{
    background: #F6F6F6!important;
  }
  .ant-modal-title{
    position: relative;
    border-left: none!important;
    padding-left:40px!important;
  }
  .ant-modal-title::before{
    content:'';
    width:28px;
    height: 28px;
    background: url('../assets/image/1673231837110.jpg');
    background-size:contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: calc(50% - 14px);
  }
  .user_content{
    display: flex;
    justify-content: space-between;
    .user_content_l{
      li{
        font-weight: bold;
        span{
          color: #666;
          font-weight: 400;
          margin-left:10px
        }
      }
    }
    .user_content_r{
      display: flex;
      align-items: center;
    }
  }
}
.tops {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 4rem;
  background: #fff;
  box-shadow: 0rem 0.1875rem 0.1875rem 0rem rgba(0, 0, 0, 0.1);
  -webkit-app-region: drag;
  .left {
    width: 200px;
    height: 4rem;
    padding-left: 20px;
    line-height: 4rem;
    .logo {
      width: 27px;
      height: 28px;
      margin-right: 12px;
      margin-bottom: 7px;
    }
    .title {
      font-family: Helvetica;
      font-size: 20px;
      color: #262626;
      font-weight: 400;
    }
  }
  .center {
    width: 60%;
    .ant-menu-horizontal {
      border: none;
      .ant-menu-item {
        -webkit-app-region: no-drag;
      }
    }
    .ant-menu-title-content {
      font-size: 15px;
      font-weight: 400;
      margin-left: 2px;
    }
    .ant-menu-horizontal > .ant-menu-item::after,
    .ant-menu-horizontal > .ant-menu-submenu::after {
      border: none !important;
    }
  }
  .right {
    display: flex;
    .leftGroup{
      position: relative;
      display: flex;
      margin-right: 20px;
      .seting{
        cursor: pointer;
        width: 24px;
        margin-right: 20px;
      }
    }
    .leftGroup::after{
      content: '';
      position: absolute;
      height: 30px;
      right: 0;
      top:-4px;
      border-right:1px solid #979797; 
    }
    -webkit-app-region: no-drag;
    .anticon {
      margin-right: 20px;
      svg {
        width: 24px;
        height: 24px;
      }
    }
  }
}
</style>